<template>
	<MyPage title="添加内容" :isback="true">
		<view slot="gBody">
			<u-form :model="form" ref="uForm">
				<view class="view-box">
					<u-form-item borderBottom labelWidth="150" label="报价单" prop="" required>
						<u-input v-model="form.quotation" style="display:none" />
						<u-input type="select" v-model="quotationLabel" placeholder="请选择报价单" disabled :select-open="quotationShow" @click="quotationShow=true" />
						<u-select v-model="quotationShow" mode="mutil-column-auto" :list="quotationData" @confirm="quotationConfirm"></u-select>
					</u-form-item>
					<u-form-item borderBottom labelWidth="150" label="所属分组" prop="" required>
						<u-input v-model="form.group" style="display:none" />
						<u-input type="select" v-model="groupLabel" placeholder="请选择分组" disabled :select-open="groupShow" @click="groupShow=true" />
						<u-select v-model="groupShow" mode="mutil-column-auto" :list="groupData" @confirm="groupConfirm"></u-select>
					</u-form-item>
					<u-form-item borderBottom labelWidth="150" label="名称" prop="name" required>
						<u-input v-model="form.name" placeholder="请输入名称" maxlength="20" :trim="true" />
					</u-form-item>
				</view>
				<view class="view-box">
					<u-form-item borderBottom labelWidth="150" label="价格" prop="price" required>
						<u-input type="number" v-model="form.price" placeholder="请输入价格" maxlength="8" />
						<text class="black" slot="right">元</text>
					</u-form-item>
					<u-form-item borderBottom labelWidth="150" label="成本价" prop="costPrice">
						<u-input type="number" v-model="form.costPrice" placeholder="请输入成本价格" maxlength="8" />
						<text class="black" slot="right">元</text>
					</u-form-item>
					<u-form-item borderBottom labelWidth="150" label="规格">
						<text class="red" @click="setSpecifications">+ 设置多规格</text>
					</u-form-item>
					<u-form-item borderBottom labelWidth="150" label="配件/服务">
						<text class="red" @click="setParts">+ 添加配件</text>
					</u-form-item>
				</view>
				<view class="view-box">
					<u-field
						type='textarea'
						label-width='0'
						v-model="form.content" 
						placeholder="请输入详细介绍"
						style="padding:15rpx 0"
					></u-field>
				</view>
				<view class="btn-view">
					<div class="btn-view-flex">
						<u-button type="error" shape="circle" plain class="btn-list" @click="backType='list',formSubmit()">保存</u-button>
						<u-button type="error" shape="circle" class="btn-list" @click="backType='goods',formSubmit()">保存并继续添加</u-button>
					</div>
				</view>
			</u-form>
		</view>
	</MyPage>
</template>		

<script>
import mixin from "@/libs/mixin.js";
import { savediy } from '@/api/my.js'
export default {
	mixins: [mixin],
	data() {
		return {
			quotationShow:false,
			quotationLabel:'',
			quotationData: [
				{
					value: 1,
					label: '华为手机报价单'
				},
				{
					value: 2,
					label: '电脑报价单'
				}
			],
			groupShow:false,
			groupLabel:'',
			groupData: [
				{
					value: 1,
					label: 'mate系列'
				},
				{
					value: 2,
					label: 'X系列'
				}
			],
			form:{
				quotation:'', //基本信息
				group:'',
				name:'',
				price:'', //价格信息
				costPrice:'',
				content:''
				//token:this.$store.state.app.token,
			},
			rules: {
				quotation: [
					{
						required: true,
						message: '请选择报价单',
						trigger: ['change','blur']
					}
				],
				group: [
					{
						required: true,
						message: '请选择分组',
						trigger: ['change','blur']
					}
				],
				name: [
					{
						required: true,
						message: '请填写名称',
						trigger: ['change','blur']
					}
				],
				price: [
					{
						required: true,
						message: '请填写价格',
						trigger: ['change','blur']
					}
				]
			},
			backType: 'list'
		}
	},
	onLoad() {
		this.getData();
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		//报价单分类
		quotationConfirm(e) {
			if( e && e.length ){
				this.quotationLabel = e[0].label;
				this.form.quotation = e[0].value;
			}
		},
		//报价单分类
		groupConfirm(e) {
			if( e && e.length ){
				this.groupLabel = e[0].label;
				this.form.group = e[0].value;
			}
		},
		//设置多规格
		setSpecifications(){
			this.$utils.navigateTo('/diy/goods-add/specifications');
		},
		//设置多规格
		setParts(){
			this.$utils.navigateTo('/diy/goods-add/parts');
		},
		// 提交登录
		formSubmit(){
			this.$refs.uForm.validate(valid => {
				if (valid) {
					if( this.backType=='list' ){
						this.$utils.switchTab('/diy/diy-list');
					}else{
						this.$utils.navigateTo('/diy/goods-add/goods-add');
					}
					// savediy(this.form).then(res=>{
					// 	if(res.list.err == 0){
					// 		this.$utils.switchTab('/my/my');
					// 	}else{
					// 		uni.showToast({
					// 			title: res.list.msg,
					// 			icon:'none'
					// 		})
					// 	}
					// }).catch(err=>{
					// 	uni.showToast({
					// 		title: res.msg,
					// 		icon:'none'
					// 	})
					// });
				}
			});
		},
		// 获取数据
		getData(){ 
			uni.request({
				url: 'http://www.txzh.com.cn/api.php?app=Default&act=getDiy',  
				method: 'POST',
				header: {  
						'Content-Type': 'application/x-www-form-urlencoded',
						'X-Requested-With': 'xmlhttprequest'
				},
				data:{ 
					token:this.$store.state.app.token
				}, 
				success: res => {
					
				},  
				fail: () => {},  
				complete: () => {}  
			});   
		},
	}
}
</script>

<style lang="scss">
page{
	background:#f3f3f3;
}
</style>
<style lang="scss" scoped>
.view-box{
	position: relative;
	margin-top:15rpx;
	background: #fff;
	padding: 10rpx 40rpx;
	border-radius: 20rpx;
}


.btn-view{
	height:180rpx;
	.btn-view-flex{
		position:fixed;
		left:4%;
		bottom:30rpx;
		z-index:10;
		width:92%;
		display: flex;
		justify-content: space-between;
		margin: 25px auto;
		.btn-list{
			width:47%;
		}
	}
}
</style>